<template>
  <common-list>
    <!-- 头部搜素start -->
    <common-search slot="search" @search="handleQuery" @reset="resetQuery">
      <el-form
        @submit.native.prevent
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        label-width="65px"
      >
        <el-form-item label="风险名称" prop="riskName">
          <common-input
            v-model="queryParams.riskName"
            clearable
            @enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="queryParams.status" filterable>
            <el-option label="全部" :value="null"></el-option>
            <el-option label="启用" :value="0"></el-option>
            <el-option label="停用" :value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </common-search>
    <!-- 头部搜素end -->
    <!--列表 start-->
    <common-table slot="content" v-loading="loading" :data="list">
      <el-table-column
        label="风险名称"
        prop="riskName"
        align="left"
        show-overflow-tooltip
      />

      <el-table-column
        label="检测规则"
        align="left"
        prop="rule"
        show-overflow-tooltip
      ></el-table-column>

      <el-table-column
        label="描述"
        align="left"
        prop="riskDescribe"
        show-overflow-tooltip
      ></el-table-column>

      <el-table-column label="状态" align="center" width="80px">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.status === 0">启用 </el-tag>
          <el-tag type="danger" v-else-if="scope.row.status === 1"
            >停用
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="left" width="90">
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="edit(scope.row)"
            v-hasPermi="['apisecurity:riskAssess:editRule']"
            >编辑</el-button
          >
          <el-button
            type="text"
            @click="handleShake(scope.row)"
            :disabled="scope.row.isDisabledForShake"
            v-hasPermi="['apisecurity:riskAssess:update']"
            >{{ scope.row.status === 0 ? "停用" : "启用" }}
          </el-button>
        </template>
      </el-table-column>
    </common-table>
    <pagination
      slot="pagination"
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <common-edit-dialog
      title="编辑风险评估"
      :visible.sync="open"
      @cancel="cancel"
      @submit="submitForm"
      :buttonLoading="buttonLoading"
    >
      <el-form
        :model="form"
        label-width="110px"
        ref="form"
        @submit.native.prevent
      >
        <el-row :gutter="18">
          <el-col :span="24">
            <el-form-item label="风险名称" prop="riskName">
              <common-input
                v-model="form.riskName"
                :maxlength="32"
                disabled
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="检测规则" prop="rule">
              <common-input
                v-model="form.rule"
                type="textarea"
                :maxlength="255"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="描述" prop="riskDescribe">
              <common-input
                v-model="form.riskDescribe"
                type="textarea"
                placeholder="请输入"
                :maxlength="255"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </common-edit-dialog>
  </common-list>
</template>

<script>
import BaseList from "@/mixins/BaseList";
import {
  list,
  edit,
  editRule,
  query,
} from "@/api/apisecurity/riskAssess/riskAssess";

export default {
  mixins: [BaseList],
  props: {},
  data() {
    return {
      total: 1, // 总条数
      loading: false, // table 加载中
      list: [], // 数据列
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        riskName: null,
        status: null,
      }, // 查询条件
      open: false,
      form: {
        id: null,
        riskName: null,
        rule: null,
        riskDescribe: null,
      },
      buttonLoading: false,
    };
  },
  watch: {},
  computed: {},
  methods: {
    /**
     * 获取列表
     */
    getList() {
      this.loading = true;
      list(this.queryParams)
        .then((res) => {
          if (res && res.code === 200) {
            this.list = res.rows.reduce((r, c) => {
              r.push({
                ...c,
                isDisabledForShake: false,
              });
              return r;
            }, []);
            this.total = res && res.total ? res.total : 0;
          } else {
            this.list = [];
            this.total = 0;
            this.handleListTips(res);
          }
        })
        .finally(() => (this.loading = false));
    },
    /**
     * 查询
     */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /**
     * 重置查询
     */
    resetQuery() {
      this.queryParams = this.$options.data().queryParams;
    },
    /**
     * 详情
     */
    edit(row) {
      if (row.status === 0) {
        return this.$GlobalErrorConfirm("编辑失败", "启用状态下不允许编辑");
      }
      Reflect.ownKeys(this.form).forEach((k) => (this.form[k] = row[k]));
      this.open = true;
    },

    cancel() {
      this.resetForm();
      this.open = false;
    },
    resetForm() {
      this.queryParams = this.$options.data().queryParams;
    },
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.buttonLoading = true;
          editRule(this.form)
            .then((res) => {
              if (res && res.code === 200) {
                this.$GlobalSuccessMessage("编辑成功");
                this.open = false;
                this.getList();
              } else {
                this.$GlobalErrorConfirm("编辑失败", res.msg);
              }
            })
            .finally(() => (this.buttonLoading = false));
        }
      });
    },

    changeStatus(row) {
      return new Promise((resolve, reject) => {
        edit({
          id: row.id,
          status: row.status === 1 ? 0 : 1,
        })
          .then((res) => {
            if (res && res.code === 200) {
              this.$GlobalSuccessMessage("操作成功");
              this.getList();
              resolve(res);
            } else {
              reject();
              this.$GlobalErrorConfirm("操作失败", res.msg);
            }
          })
          .catch(() => reject());
      });
    },
  },
  created() {
    this.getList();
  },
  mounted() {},
};
</script>
